<template>


	<div class="page">

		<!-- 上传区域 -->

		<div class="upload flex unified-flex-align">

			<!-- 头像预览框 -->
			<div class="view-avatar">
				
				<img v-show="avatar" :src="avatar" >
				
			</div>
			
			<p class="upload-tips">头像图片仅支持( jpg / jpeg / png )格式</p>
			
			<!--  -->
			<el-button class="upload-btn" type="primary" plain><input @change="fileChange" class="upload-input" type="file"/>上传头像</el-button>
			
		</div>








	</div>

</template>

<script>
	
	export default {
		
		data(){
			
			return {
				avatar:""
			}
			
		},
		methods:{
			
			
			fileChange(e){
				
				if( e.target.files.length){
					let file = e.target.files[0]
					this.avatar = window.URL.createObjectURL(file)
				}
			}
			
			
		}
		
	}
	
</script>

<style scoped="scoped">
	.page {
		width: 100%;
		height: 100%;
	}

	.upload {
		width: 40%;
		height: 100%;
		flex-direction: column;
		padding-top: 60px;
		box-sizing: border-box;
	}

	.view-avatar {
		width: 160px;
		height: 160px;
		background-color: #fff;
		border: 4px solid #C3C3C366;
		border-style: dashed;
		margin-bottom: 20px;
	}
	.view-avatar img{
		width: 100%;
		height: 100%;
	}
	.upload-tips{
		font-size: 10px;
		margin-bottom: 20px;
	}
	.upload-btn{
		position: relative;
	}
	.upload-input{
		position: absolute;
		width: 100%;
		height: 100%;
		opacity: 0;
	}
</style>
